<template>
	<view class="prepaymentWrap">
	  
	  <view class="content">
	    
	    <view class="con">
	
	      <view class="con_tit">
	        <view class="select_no" :class="[selctStaAll?'select_noT':'']" @tap="selectAllBtn">
	          <image v-if="selctStaAll" class="select_true" mode="scaleToFill" :src="$IMAGE_URL + '/gouxuan_icon.png'" />
	        </view>
	        <view class="con_tit_text">全部付款</view>
	      </view>
	
	      <view class="list">
	        <view class="list_min" v-for="item in list">
	          <view class="select_no" :class="[item.selctSta?'select_noT':'']" @tap="selectBtn(index,item)">
	            <image v-if="item.selctSta" class="select_true" mode="scaleToFill" :src="$IMAGE_URL + '/gouxuan_icon.png'" />
	          </view>
	          <view class="list_min_timer">
	            <view class="list_min_timer_top">第{{item.period}}/{{productOrderRecordVoList.length}}期</view>
	            <view class="list_min_timer_bot">{{item.expiretime}}</view>
	          </view>
			 <view class="list_min_num">¥{{(item.price - (item.paide / 100)).toFixed(2)}}</view>

	        </view>
	      </view>
	
	    </view>
	
	    <view class="bottom_zhan"></view>
	
	
	  </view>
	  
	  <view class="submitBtn_wrap">
	    <view class="submitBtn" @tap="onpay">提前还 ¥{{priceAll}}</view>
	  </view>
	  
	
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			query:'',
			list:[],
			productOrderRecordVoList:[],
	
			buyBreakSta: false, //是否是归还订单
	
			surplusNum: 0,
			thisMonthIndex: 0,
			oid: '',
	
			priceAll: 0,
			selctStaAll: false,
			checkIdsArr: []
		};
	},
	 onLoad(query) {
		let id = JSON.parse(query.param);
		this.query = query
		this.oid = id
		this.getoOrderBill(id);
	},

	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 全部
		selectAllBtn(){
		  let arr = this.list;
		  let sta = true;
		  if(this.selctStaAll){
			sta = false
		  }else{
			sta = true
		  }
			arr.forEach(item=>{
			item.selctSta = sta
			})
			this.list = arr,
			this.selctStaAll = sta
		  this.calculateFun();
		},
	
		
		// 勾选
		selectBtn(index,dat){
			let arr = this.list;

			let sta = dat.selctSta;
			dat.selctSta = !sta;

			arr[index] = dat;

			this.list = arr
			this.calculateFun();
		},
		
		
		// 计算金额
		calculateFun(){
		  let arr = this.list;
		  let checkArr = [];
		  let num = 0;
		  arr.forEach(item=>{
			if(item.selctSta){
			  console.log(item.price)
			  checkArr.push(item.id);
			  num += item.price - (item.paide / 100);

			}
		  })
		      
		
		  num = num.toFixed(2);
			this.checkIdsArr = checkArr,
			this.priceAll = num
	
		},
	
		upTime(format,time) {
			if(!time) {
				return ''
			}
			// let format = "%Y-%M-%D %h:%m:%s"
			format = format ? format: "%Y-%M-%D"
			time = time.toString().length == 10 ? time*1000:time
			let dataTime = new Date(time)
			let year = dataTime.getFullYear()
			let month = (dataTime.getMonth() + 1).toString().padStart(2, 0)
			let day = dataTime.getDate().toString().padStart(2, 0)
			let Hours = dataTime.getHours().toString().padStart(2, 0)
			let Minutes = dataTime.getMinutes().toString().padStart(2, 0)
			let Seconds = dataTime.getSeconds().toString().padStart(2, 0)
			format = format.replace(/(%Y|%M|%D|%h|%m|%s)/g, (n) => {
				return {
					'%Y': year, '%M': month, '%D': day, '%h': Hours, '%m': Minutes, '%s': Seconds,
				}[n]
			})
				return format
		
		},
		// 获取账单数据
		getoOrderBill(oid){
			const time = new Date().setHours(0,0,0,0)/1000+(24*60*60);
			console.log(888999,(time));
	
			this.$http('order.detail', {
				id: oid,
			}, '加载中...').then(res => {
				console.log(res)
				let productOrderRecordVoList = res.data.productOrderRecordVoList;
	
				let priceFalseArr = [];
	
				productOrderRecordVoList.forEach((item,index)=>{
					
					item.time = this.upTime("%Y年%M月%D日",time);
					item.createtime = this.upTime("%Y年%M月%D日",item.createtime);
					item.duetime = this.upTime("%Y年%M月%D日",item.duetime);
					item.expiretime = this.upTime("%Y年%M月%D日",item.expiretime);
					item.price = (item.price/100).toFixed(2);
					item.selctSta = false;
	
					if(!item.payment){
					  priceFalseArr.push(item)
					}
					
				})
				console.log(567,priceFalseArr)
	
	
				this.list=priceFalseArr,
				this.productOrderRecordVoList = productOrderRecordVoList
			})
		},
	
	 // 支付账单
		async onpay(){
			let that = this
			const oid = this.oid,
			id = this.checkIdsArr;
			let muchId = id.join(',');
			if(id.length==0){
				this.$u.toast('请先选择需要付款的期数账单');
				return;
			}
	
			let dat = {
			  oid: oid,
			  orIds: muchId
			}
			console.log('多笔账单支付')
			if(id.length == 1){
				that.$Router.replace({
				  path: '/pages/order/payment/method',
				  query: {
				    price: this.priceAll,
					id: id[0],
					oid: oid,
					tit: '提前付款',
					buyout:0,
					manyId:0
				  }
				});
				// this.$http("goods.alipay", {id:id[0],oid:oid}).then((pay) => {
				// 	uni.requestPayment({
				// 		provider: 'alipay',
				// 		orderInfo: pay.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				// 		success: function (res) {
				// 			that.$u.toast('支付成功！');
				// 			that.jump('/pages/order/list', { type: '-2' })
				// 		},
				// 		fail: function (err) {
				// 			that.$u.toast('支付失败！');
				// 			console.log('fail:' + JSON.stringify(err));
				// 		}
				// 	});
								
				// })
			}else{
				that.$u.toast('暂不支持支付多期！');
				// that.$Router.replace({
				//   path: '/pages/order/payment/method',
				//   query: {
				//     price: this.priceAll,
				// 	id: id,
				// 	oid: oid,
				// 	tit: '提前付款',
				// 	buyout:0,
				// 	manyId:dat
				//   }
				// });
				
				
				// this.$http("goods.alipayRecords",dat ).then((pay) => {
				// 	uni.requestPayment({
				// 		provider: 'alipay',
				// 		orderInfo: pay.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				// 		success: function (res) {
				// 			that.$u.toast('支付成功！');
				// 			that.jump('/pages/order/list', { type: '-2' })
				// 		},
				// 		fail: function (err) {
				// 			that.$u.toast('支付失败！');
				// 			console.log('fail:' + JSON.stringify(err));
				// 		}
				// 	});
								
				// })
			}
		},

	}
};
</script>

<style lang="scss">
	page{
	  background: #F7F8F9;
	}
	.prepaymentWrap{
	  width: 100vw;
	  position: relative;
	}
	.content{
	  padding-top: 34rpx;
	}
	.con{
	  width: 702rpx;
	  background: #FFFFFF;
	  border-radius: 8px;
	  box-sizing: border-box;
	  padding: 24rpx 24rpx 0;
	  margin: 0 auto;
	}
	
	.con_tit{
	  width: 100%;
	  height: 90rpx;
	  display: flex;
	  align-items: center;
	}
	.select_no{
	  width: 26rpx;
	  height: 26rpx;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  margin-right: 24rpx;
	  position: relative;
	  padding: 0;
	  line-height: 0;
	}
	.select_noT{
	  border: 2rpx solid #FFF;
	}
	.select_true{
	  width: 30rpx;
	  height: 30rpx;
	  position: absolute;
	  left: -2rpx;
	  top: -2rpx;
	  display: block;
	}
	.con_tit_text{
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 42rpx;
	}
	
	.list_min{
	  width:100%;
	  display: flex;
	  align-items: center;
	  padding: 24rpx 0;
	  border-top: 2rpx solid #F5F5F5;
	}
	.list_min_timer{
	  width: 300rpx;
	}
	.list_min_timer_top{
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 42rpx;
	}
	.list_min_timer_bot{
	  font-size: 28rpx;
	  color: #767D8F;
	  line-height: 40rpx;
	  margin-top: 4rpx;
	}
	.list_min_num{
	  width: 220rpx;
	  text-align: right;
	  font-size: 40rpx;
	  font-weight: bold;
	  color: #333333;
	  line-height: 40rpx;
	  margin-left: 50rpx;
	}
	
	
	.bottom_zhan{
	  width: 100vw;
	  height: 250rpx;
	}
	
	.submitBtn_wrap{
	  width: 100vw;
	  height: 200rpx;
	  background-color: #F7F8F9;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  box-sizing: border-box;
	  padding-top: 24rpx;
	}
	.submitBtn{
	  width: 670rpx;
	  height: 88rpx;
	  background: linear-gradient(358deg, #ffbc31 0%, #ffbc31 100%);
	  border-radius: 10rpx;
	  margin: 0 auto;
	  text-align: center;
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	  line-height: 44rpx;
	  letter-spacing: 2rpx;
	  line-height: 88rpx;
	}
</style>